<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监控数据采集系统后台登录</title>
    <style>
        .ok {
            color: green;
            border: 1px solid green;
        }
        .error {
            color: red;
            border: 1px solid red;
        }
        #main{
           /* border:1px solid black;*/
            text-align: center;
            margin-top:150px ;
        }
        span{
            display: none;
        }body{
            background: lightpink;
                 }
         #login{
             text-align: center;
             margin-left: 500px;
             width: 300px;
             height: 300px;
             background: lavenderblush;
         }h1{
            text-align: center;
            color: #0C0C0C;
                   }

    </style>
    <script>
        //校验账号的格式
        function check_code() {
            console.log(1);
            //获取账号
            var code =
                document.getElementById("code").value;
            //校验其格式(\w字母或数字或下划线)
            var span =
                document.getElementById("code_msg");
            var reg = /^\w{6,10}$/;
            if(reg.test(code)) {
                //通过，增加ok样式
                span.className = "ok";
            } else {
                //不通过，增加error样式
                span.className = "error";
            }
        }
        function check_pwd(){
            console.log(2);
            var code2 =document.getElementById("pwd").value;
            var span2 =
                document.getElementById("pwd_msg");
            var reg2 = /^\w{6,10}$/;
            if(reg2.test(code2)) {
                span2.className = "ok";
            } else {
                span2.className = "error";
            }

        }
    </script>
</head>
<body>
    <h1>监控数据采集系统后台登录界面</h1>
    <div id="main">
        <form action="/vm/index.html" >
            <div id="login" align="center">
                <br>
                <br>
                <br>
                <p>
                    账号：
                    <input type="text" id="code" onblur="check_code()"/>
                    <span id="code_msg">6-10位字母、数字、下划线</span>
                </p>
                <p>
                    密码：
                    <input type="password" id="pwd" onblur="check_pwd()" />
                    <span id="pwd_msg">8-20位字母、数字、下划线</span>
                </p>
                <p><input type="submit" value="登录"/></p>
            </div>
        </form>
    </div>
</body>
</html>